<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

	<style type="text/css">
	div.pq-grid tr td.disabled{    
	    text-shadow: 0 1px 0 #fff;
	    background:#ddd;
	}
	tr td.beige{        
	    background:beige;
	}
	</style>
	
<script>
    $(function () {
        function disableTextRenderer(ui) {
            var grid = $(this).pqGrid('getInstance').grid,
                rowData = ui.rowData,
                rowIndx = ui.rowIndx,
                dataIndx = ui.dataIndx;

            if (grid.isEditableCell({ rowIndx: rowIndx, dataIndx: dataIndx }) == false) {
                //inject disabled class into read only cells.                
                grid.addClass({ rowIndx: rowIndx, dataIndx: dataIndx, cls: 'disabled' });
            }
            else {
                grid.removeClass({ rowIndx: rowIndx, dataIndx: dataIndx, cls: 'disabled' });
            }
        };
        var colModel = [
            { title: "Country", width: "120", dataIndx: "Country", cls: 'beige' },
            { title: "Customer ID", dataIndx: "customerid", width: 120 },
            { title: "Company Name", width: 180, dataIndx: "companyname",
                editable: function (ui) {
                    var countries = ['SPAIN', 'UK', 'USA'],
                        country = ui.rowData['Country'].toUpperCase();
                    //make cell read only if country in this row is present in countries list.    
                    if ($.inArray(country, countries) !== -1) {
                        return false;
                    }
                    else {
                        return true;
                    }
                },
                render: disableTextRenderer
            },            
            { title: "Contact Name", width: 140, dataIndx: "contactname",
                editable: function (ui) {
                    var countries = ['GERMANY', 'BRAZIL'],
                        country = ui.rowData['Country'].toUpperCase();
                    //make cell read only if country in this row is present in countries list.    
                    if ($.inArray(country, countries) !== -1) {
                        return false;
                    }
                    else {
                        return true;
                    }
                },
                render: disableTextRenderer
            },
            { title: "Contact Title", width: 140, dataIndx: "contacttitle" },
		    { title: "Address", width: "170", dataIndx: "address" }
		];
        var dataModel = {
            recIndx: "customerid",
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            sortIndx: "contactname",
            sortDir: "up",
            url: "/pro/customers/get",
            getData: function (dataJSON) {
                return { data: dataJSON.data };
            }
        }
        var newObj = {
            width: 'auto',
            dataModel: dataModel,
            showTitle: false,
            showBottom: false,
            colModel: colModel,
            selectionModel: { all: true },
            copyModel: { header: true },
            editable: true,
            cellSave: function (evt, ui) {
                //refresh the row to update the read only cells.                
                $(this).pqGrid('refreshRow', {rowIndx: ui.rowIndx});
            },
            scrollModel: { autoFit: true },
            title: "Contact Details"
        };
        $("#grid_readonly").pqGrid(newObj);
    });
        
</script>    
</head>
<body>
The grid cells can be selectively made read only depending upon any arbitrary run time condition. 
Read only cells can't be modified with inline editing or paste of data. 
Experience how the read only cells are refreshed when Country is changed ( run time condition ).
<div id="grid_readonly" style="margin: auto;">
    </div>

</body>

</html>
